<template>
  <div class="daily-view-container">
    <el-row class="top-bar" type="flex" align="middle" justify="start" :gutter="5">
      <el-col :span="1" class="icon-button"><i @click="goBack" class="el-icon-arrow-left" /></el-col>
      <el-col :span="1" class="icon-button"><i @click="goHome" class="el-icon-house" /></el-col>
      <el-col :span="1" class="icon-button"><i @click="refreshPage" class="el-icon-refresh" /></el-col>
      <el-col :span="21" class="title">查看当日预约信息</el-col>
    </el-row>

    <el-row class="content" :gutter="0">
      <!-- 左侧时间段 -->
      <el-col :span="4" class="time-list">
        <div class="flow-chart">
          <el-tag type="info">已下单</el-tag>
          <div class="arrow-with-label">
            <span class="arrow-label">审核</span>
            <span class="arrow">→</span>
          </div>
          <el-tag type="warning">已确认</el-tag>
          <div class="arrow-with-label">
            <span class="arrow-label">归档</span>
            <span class="arrow">→</span>
          </div>
          <el-tag type="success">已服务</el-tag>
        </div>

        <div
            v-for="(slot, index) in timeSlots"
            :key="index"
            class="time-item"
            :class="{ active: index === selectedIndex }"
            @click="selectedIndex = index"
        >
          {{ slot.timeRange }}
        </div>
      </el-col>

      <!-- 右侧预约信息 -->
      <el-col :span="20" class="appointment-list">
        <div
            v-for="(slot, index) in timeSlots"
            :key="index"
            class="appointment-card"
            :class="{ selected: index === selectedIndex, booked: slot.booked }"
        >
          <template v-if="slot.booked">
            <div class="info">
              <i class="el-icon-user"></i>
              <span class="name">{{ slot.customerName }}</span>
              <el-tag
                  :type="statusTagType(slot.status)"
                  size="mini"
                  style="margin-left: 10px"
              >
                {{ statusText(slot.status) }}
              </el-tag>
            </div>
            <div class="actions">
              <el-button
                  v-if="slot.status === 1"
                  size="mini"
                  icon="el-icon-edit"
                  :style="actionStyle"
                  @click="confirmAction(slot.id, 2, '审核')"
              >审核</el-button>
              <el-button
                  v-if="slot.status === 2"
                  size="mini"
                  icon="el-icon-folder"
                  :style="actionStyle"
                  @click="confirmAction(slot.id, 3, '归档')"
              >归档</el-button>
              <el-button
                  v-if="slot.status === 1 || slot.status === 2 || slot.status === 3"
                  size="mini"
                  icon="el-icon-remove-outline"
                  :style="actionStyle"
              >撤销</el-button>
            </div>
          </template>
          <template v-else>
            <div class="empty">空闲</div>
            <el-button size="mini" icon="el-icon-plus" :style="actionStyle">添加</el-button>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedIndex: 0,
      timeSlots: [],
      actionStyle: {
        backgroundColor: '#897E20',
        borderColor: '#897E20',
        color: '#fff'
      },
      cellTimeMap: {
        1: '10:30–11:30',
        2: '11:30–12:30',
        3: '13:00–14:00',
        4: '14:00–15:00',
        5: '15:00–16:00',
        6: '16:00–17:00',
        7: '17:00–18:00',
        8: '18:00–19:00',
        9: '19:00–20:00',
        10: '20:00–21:00'
      }
    };
  },
  created() {
    this.fetchTodayOrders();
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
    },
    goHome() {
      this.$router.push('/home');
    },
    refreshPage() {
      location.reload();
    },
    fetchTodayOrders() {
      const today = new Date();
      const yyyyMMdd = today.toISOString().split('T')[0].replace(/-/g, '');
      axios
          .get(`http://localhost:8080/order/?date=${yyyyMMdd}`, {
            withCredentials: true,
            headers: {
              'Content-Type': 'application/json'
            }
          })
          .then(res => {
            const orders = res.data.data;
            const map = {};
            orders.forEach(order => {
              map[order.cell] = {
                customerName: order.customer,
                status: order.status,
                id: order.id
              };
            });
            this.timeSlots = [];
            for (let i = 1; i <= 10; i++) {
              const bookedData = map[i] || {};
              this.timeSlots.push({
                timeRange: this.cellTimeMap[i],
                booked: Boolean(map[i]),
                customerName: bookedData.customerName || '',
                status: bookedData.status || null,
                id: bookedData.id || null
              });
            }
          })
          .catch(err => {
            console.error('获取预约信息失败', err);
          });
    },
    statusText(status) {
      switch (status) {
        case 1:
          return '已下单';
        case 2:
          return '已确认';
        case 3:
          return '已服务';
        case 4:
          return '异常';
        default:
          return '';
      }
    },
    statusTagType(status) {
      switch (status) {
        case 1:
          return 'info';
        case 2:
          return 'warning';
        case 3:
          return 'success';
        case 4:
          return 'danger';
        default:
          return 'default';
      }
    },
    confirmAction(id, flag, actionText) {
      this.$confirm(`您确定要${actionText}该订单吗？此操作不可撤销。`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            axios.put(`http://localhost:8080/order/review/${id}/${flag}`, {}, {
              withCredentials: true,
              headers: {
                'Content-Type': 'application/json'
              }
            })
                .then(() => {
                  this.$message.success(`${actionText}成功`);
                  this.fetchTodayOrders();
                })
                .catch(err => {
                  this.$message.error(`${actionText}失败`);
                  console.error(`${actionText}失败`, err);
                });
          })
          .catch(() => {
            // 用户点击取消
          });
    }
  }
};
</script>


<style scoped>
.daily-view-container {
  background-color: #f9f7f1;
  height: 100vh;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

.top-bar {
  margin-bottom: 20px;
  align-items: center;
}

.icon-button {
  font-size: 20px;
  color: #7C6651;
  text-align: center;
  cursor: pointer;
  padding: 0 4px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #5A4A39;
  padding-left: 10px;
}

.content {
  height: calc(100vh - 80px);
}

.time-list {
  background-color: #f9f7f1;
  border-right: 1px solid #ddd;
  padding-right: 10px;
}

.flow-chart {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.arrow-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 5px;
}

.arrow-label {
  font-size: 12px;
  color: #7C6651;
  margin-bottom: 2px;
}

.arrow {
  font-size: 20px;
  color: #7C6651;
}

.time-item {
  padding: 16px;
  text-align: center;
  cursor: pointer;
  color: #7C6651;
  border-bottom: 1px solid #eee;
}

.time-item.active {
  background-color: #efd8ab;
  font-weight: bold;
}

.appointment-list {
  padding: 10px;
  background-color: #f9f7f1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appointment-card {
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.appointment-card.booked {
  background-color: #f7ebcd;
}

.appointment-card.selected {
  border: 2px solid #ca9e55;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #5A4A39;
}

.name {
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 10px;
}

.empty {
  color: #999;
  font-size: 14px;
  margin-right: 10px;
}
</style>
